<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item> <i class="el-icon-shopping-bag-2"></i> 贷款知识 </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <el-tabs v-model="activeName" @tab-click="classClick">
        <el-tab-pane label="热点聚焦" name="1"></el-tab-pane>
        <el-tab-pane label="常见问题" name="2"></el-tab-pane>
      </el-tabs>
      <div class="handle-box">
        <el-button type="primary" class="handle-del mr10" @click="addClick">新增</el-button>
        <el-input placeholder="请输入标题查询" class="handle-input mr10" v-model="query.souVal"></el-input>
        <el-button type="primary" icon="el-icon-search" @click="souclick">搜索</el-button>
      </div>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column type="selection" width="55" align="center"></el-table-column>
        <el-table-column type="index" :index="tableIndex" label="序号" width="55" align="center"></el-table-column>
        <el-table-column prop="title" width="300" label="标题"></el-table-column>
        <el-table-column prop="content" label="内容"></el-table-column>
        <el-table-column prop="date" label="操作" width="180">
          <template slot-scope="scope">
            <el-button type="text" icon="el-icon-edit" class="red" @click="editBtnClick(scope.row)">编辑</el-button>
            <el-button type="text" icon="el-icon-delete" class="red" @click="delClick(scope.row.kId)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination background layout="total, prev, pager, next" :current-page="query.page" :page-size="query.limit" :total="query.totalCount"
                       :pager-count="5" @current-change="PageChange" @prev-click="PageChange" @next-click="PageChange"></el-pagination>
      </div>
    </div>
    <!-- 新增知识 -->
    <el-dialog title="新增" :visible.sync="knowledge.flg" width="40%" @close="() => { this.knowledge.editId =''}">
      <el-form ref="form" :model="knowledge.form" label-width="100px">
        <el-form-item label="标题">
          <el-input v-model="knowledge.form.title"></el-input>
        </el-form-item>
        <el-form-item label="内容">
          <el-input type="textarea" :rows="5" v-model="knowledge.form.content"></el-input>
        </el-form-item>
        <el-form-item label="视频（可选）">
          <video style="width:100%;" v-if="knowledge.form.medie" :src="knowledge.form.medie" controls></video>
          <el-upload v-if="!knowledge.form.medie" class="upload-demo" drag action="" :before-upload="upload" accept=".mp4" :show-file-list="false"
                     multiple>
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <div class="el-upload__tip" slot="tip">只能上传MP4文件，且不超过10M</div>
          </el-upload>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="knowledge.flg = false">取 消</el-button>
        <el-button type="primary" @click="formSub" :loading="knowledge.load">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { webDarticleInit, webDarticleAdd, webDarticleEdit, webDarticleDel } from '../../../api/index';
import cosUpFile from '../../../utils/cos'

export default {
  data() {
    return {
      activeName: '1',
      query: {
        page: 1,
        limit: 10,
        totalCount: 0,
        sou: '',
      },
      tableData: [],
      knowledge: {
        flg: false,
        load: false,
        editId: '',
        form: {
          title: '',
          content: '',
          medie: ''
        },
      }
    };
  },
  created() {
    this.getInit();
  },
  methods: {
    //切换
    classClick() {
      this.query.page = 1;
      this.getInit();
    },
    //初始化
    getInit() {
      webDarticleInit({
        page: this.query.page,
        limit: this.query.limit,
        type: this.activeName,
        kw: this.query.sou
      }).then(res => {
        if (res.code == 0) {
          this.tableData = res.recordList;
          this.query.totalCount = res.totalCount;
        } else {
          this.$message(res.code);
        }
      })
    },
    //新增
    addClick() {
      this.knowledge.flg = true;
      this.knowledge.form = {
        title: '',
        content: '',
        medie: ''
      };
    },
    //编辑
    editBtnClick(item) {
      this.knowledge.flg = true;
      this.knowledge.editId = item.kId;
      this.knowledge.form.title = item.title;
      this.knowledge.form.content = item.content;
      this.knowledge.form.medie = item.medie;
    },
    //上传视频
    upload(file) {
      let size = 1024 * 1024 * 10;
      if (file.size > size) {
        this.$message('上传视频大小不能超过10M');
        return false;
      }
      cosUpFile(file, (err, data) => {
        if (err) {
          this.$message("上传失败");
        } else {
          this.$set(this.knowledge.form, 'medie', 'https://' + data.Location)
          // this.$set(this.knowledge.form, 'medie', 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4')
        }
      })
      return false;
    },
    //提交
    formSub() {
      this.knowledge.load = true;
      if (this.knowledge.editId) {
        webDarticleEdit({
          kId: this.knowledge.editId,
          type: this.activeName,
          title: this.knowledge.form.title,
          content: this.knowledge.form.content,
          medie: this.knowledge.form.medie
        }).then(res => {
          this.knowledge.load = false;
          if (res.code == 0) {
            this.$message.success("编辑成功");
            this.knowledge.flg = false;
            this.getInit();
          } else {
            this.$message(res.msg);
          }
        })
      } else {
        webDarticleAdd({
          type: this.activeName,
          title: this.knowledge.form.title,
          content: this.knowledge.form.content,
          medie: this.knowledge.form.medie,
        }).then(res => {
          this.knowledge.load = false;
          if (res.code == 0) {
            this.$message.success("新增成功");
            this.knowledge.flg = false;
            this.getInit();
          } else {
            this.$message(res.msg);
          }
        })
      }
    },
    //序号
    tableIndex(index) {
      return (this.query.page - 1) * this.query.limit + index + 1;
    },
    //翻页
    PageChange(num) {
      this.query.page = num;
      this.getInit();
    },
    //搜索
    souclick() {
      this.query.page = 1;
      this.getInit();
    },
    //删除
    delClick(id) {
      this.$confirm('确定要删除此项吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        webDarticleDel({
          id: id
        }).then(res => {
          if (res.code == 0) {
            this.$message.success("删除成功");
            this.getInit();
          } else {
            this.$message(res.msg);
          }
        })
      })
    }
  }
};
</script>

<style scoped>
/deep/ :focus {
    outline: 0;
}
.handle-input {
    width: 300px;
    display: inline-block;
}
.drawerCan {
    padding: 20px;
}
</style>
